<!DOCTYPE html>
<head>
	<title>Initialization</title>
	<link rel="stylesheet" href="../../../codebase/webix.css" type="text/css" charset="utf-8">
	<script src="../../../codebase/webix.js" type="text/javascript" charset="utf-8"></script>
	<style>
		.webix_treemap_item{
			text-align: center;
		}
	</style>
</head>
<body>

	<div id="testA" style='width:450px; height:350px;'></div>
	<script type="text/javascript" charset="utf-8">

		webix.ready(function(){
			//plain json data, based on objects
			webix.ui({
				container:"testA",
				rows:[
					{ view: "toolbar", height: 35, elements:[
							{view: "label", label: "TreeMap"}
						]
					},
					{
						view:"treemap",
						select: true,
						template: function(item){
							return item.label||"";
						},
						value: "#value#",
						data: [
							{ id:"1", label: "Technology", data:[
								{ id:"1.1", value:"50" },
								{ id:"1.2", value:"30" },
								{ id:"1.3", value:"20" }
							]},
							{ id:"2", label: "Healthcare", data:[
								{ id:"2.1", value:"80" },
								{ id:"2.2", value:"10" },
								{ id:"2.3", value:"60" },
								{ id:"2.4", value:"5" },
								{ id:"2.5", value:"8" }
							]},
							{ id:"3", label: "Basic Materials", data:[
								{ id:"3.1", value:"5" },
								{ id:"3.2", value:"7" },
								{ id:"3.3", value:"10" }
							]},
							{ id:"4", label: "Financial", data:[
								{ id:"4.1", value:"100" },
								{ id:"4.2", value:"15" },
								{ id:"4.3", value:"20" }
							]},
							{ id:"5", label: "Consumer Goods", data:[
								{ id:"5.1", value:"4" },
								{ id:"5.2", value:"10" },
								{ id:"5.3", value:"5" }
							]},
							{ id:"6", label: "Industrial Goods", data:[
								{ id:"6.1", value:"20" },
								{ id:"6.2", value:"5" },
								{ id:"6.3", value:"9" }
							]}
						]
					}
				]

			});


		});
	</script>
</body>
</html>